<template>
  <div class="map-container">
    <div class="map" id="map" ref="map"></div>
  </div>
</template>

<script>
import { apiGetAreaCount } from '@/api/api'
// import axios from 'axios'
import * as echarts from 'echarts'
import Vue from 'vue'
import MapInner from './MapInner.vue';

let chart = null;
export default {
  name: 'map-view',
  components: {
  },
  data () {
    return {
      mapData: [
        {
          name: '杭州市',
          "value": [
            119.476498,
            29.898918
          ],
          datas: 0,
        },
        {
          name: '宁波市',
          value: [
            121.479174,
            29.733017
          ],
          datas: 0,
        },
        {
          name: '温州市',
          value: [
            120.463912,
            27.894726
          ],
          datas: 0,
        },
        {
          name: '嘉兴市',
          value: [
            120.783487,
            30.620063
          ],
          datas: 0,
        },
        {
          name: '湖州市',
          value: [
            119.873663,
            30.743058
          ],
          datas: 0,
        },
        {
          "name": "绍兴市",
          value: [
            120.640933,
            29.732893
          ],
          datas: 0,
        },
        {
          "name": "金华市",
          value: [
            119.957007,
            29.115117
          ],
          center: [
            "119.932374",
            "29.4661"
          ],
          datas: 0,
        },
        {
          "name": "衢州市",
          value: [
            118.679569,
            28.932446
          ],
          datas: 0,
        },
        {
          "name": "舟山市",
          value: [
            122.146805,
            30.056563
          ],
          datas: 0
        },
        {
          "name": "台州市",
          "value": [
            121.136679,
            28.757098
          ],
          datas: 0
        },
        {
          "name": "丽水市",
          "value": [
            119.517145,
            28.197644
          ],
          datas: 0
        }
      ],
    }
  },
  beforeDestroy () {
    if (chart) {
      chart.clear();
    }
  },
  destroyed () {
    if (chart) {
      chart.dispose();
    }
  },
  mounted () {
    this.getCount();
  },
  methods: {
    getCount () {
      apiGetAreaCount().then((res) => {
        if (res.code == 1) {
          let data = res.data;
          this.mapData.forEach((item) => {
            item.datas = data[item.name]
          })
          this.initChart2();
          //this.areaData = res.data.areaData
        }
      }).catch((err) => {
        this.initChart2()
      })
    },
    initChart2 () {
      const zjJson = require('@/assets/data/zhejiang.json');
      echarts.registerMap('zjMap', zjJson)
      chart = echarts.init(this.$refs.map);
      let option = {
        geo: [
          {
            map: 'zjMap',
            aspectScale: 1.2,
            layoutCenter: ["50%", "48.5%"], //地图位置
            layoutSize: '100%',
            roam: false,
            itemStyle: {
              normal: {
                // areaColor: {
                //   image: require('@/assets/images/ground.png'),
                //   repeat: 'repeat',
                // },

                // shadowColor: 'rgb(58,115,192)',
                // shadowOffsetX: 6,
                // shadowOffsetY: 12,
                //opacity: 1,
                borderColor: "#08e8f3",
                opacity: 0,
                borderWidth: 1,
              },
            },
            emphasis: {
              label: false
            },
            // z: 2,
            zoom: 1,
          },
          {
            map: "zjMap",
            aspectScale: 1.2,
            zoom: 1,
            zlevel: -10,
            layoutCenter: ["50%", "50.7%"],
            layoutSize: '100%',
            show: true,
            silent: true,
            roam: false,
            itemStyle: {
              normal: {
                borderColor: "#3c0f3fb",
                borderWidth: 2,
                shadowColor: "#8cd3ef",
                shadowOffsetY: 10,
                shadowBlur: 120,
                areaColor: "rgba(29,85,139,.6)",
              },
            },
            emphasis: {
              label: false
            }
          },
          // 重影
          {
            type: "map",
            map: "zjMap",
            aspectScale: 1.2,
            zlevel: -1,
            zoom: 1,
            layoutCenter: ["50%", "50.7%"],
            layoutSize: '100%',
            roam: false,
            silent: true,
            label: {
              show: true,
              // 相对的百分比
              position: "inside",
              color: "#fff",
            },
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(70,188,255,0.94)' // 0% 处的颜色
                }, {
                  offset: 1, color: ' rgba(3,44,203,0.94) ' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              borderWidth: 2,
              borderColor: "#A9D6FF",
            },
            emphasis: {
              label: false
            }
          },
          {
            type: "map",
            map: "zjMap",
            aspectScale: 1.2,
            zlevel: -2,
            zoom: 1,
            layoutCenter: ["50%", "51.4%"],
            layoutSize: '100%',
            roam: false,
            silent: true,
            itemStyle: {
              normal: {
                borderWidth: 4,
                borderColor: "rgba(45, 105, 205,0.8)",
                shadowColor: "rgba(45, 105, 205,0.4)",
                shadowOffsetY: 5,
                shadowBlur: 15,
                areaColor: "rgba(5,21,35,0.1)",
              },
            },
            emphasis: {
              label: false
            }
          },
          {
            type: "map",
            map: "zjMap",
            aspectScale: 1.2,
            zlevel: -3,
            zoom: 1,
            layoutCenter: ["50%", "52.1%"],
            layoutSize: '100%',
            roam: false,
            silent: true,
            itemStyle: {
              normal: {
                borderWidth: 5,
                borderColor: "rgba(4, 12, 46,1)",
                shadowColor: "rgba(255, 255, 255,0.5)",
                shadowOffsetY: 10,
                shadowBlur: 8,
                areaColor: "rgba(5,21,35,0.1)",
              },
            },
            emphasis: {
              label: false
            }
          },
          {
            type: "map",
            map: "zjMap",
            aspectScale: 1.2,
            zlevel: -4,
            zoom: 1,
            layoutCenter: ["50%", "52.8%"],
            layoutSize: '100%',
            roam: false,
            silent: true,
            itemStyle: {
              normal: {
                borderWidth: 6,
                borderColor: "rgba(4, 12, 46,1)",
                shadowColor: "rgba(255, 255, 255,0.5)",
                shadowOffsetY: 10,
                shadowBlur: 8,
                areaColor: "rgba(5,21,35,0.1)",
              },
            },
            emphasis: {
              label: false
            }
          },
        ],
        series: [
          // {
          //   tooltip: {
          //     show: false,
          //   },
          //   type: 'effectScatter',
          //   coordinateSystem: 'geo',
          //   rippleEffect: {
          //     scale: 10,
          //     brushType: 'stroke',
          //   },
          //   showEffectOn: 'render',
          //   itemStyle: {
          //     normal: {
          //       color: '#00FFFF',
          //     }
          //   },
          //   label: {
          //     normal: {
          //       color: '#fff',
          //     },
          //   },
          //   symbol: 'circle',
          //   symbolSize: [10, 5],
          //   //data: this.mapDate,
          //   zlevel: 1,
          // },
          // {
          //   type: 'scatter',
          //   coordinateSystem: 'geo',
          //   itemStyle: {
          //     color: '#00FFF6',
          //   },
          //   symbol: "image://static/map-marker.png",
          //   symbolSize: [32, 41],

          //   symbolOffset: [0, -20],
          //   zlevel: 999,
          //   //data: this.mapDate,
          // },
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            label: {
              show: true,
              formatter: function (params) {
                // var name = params.data.name
                var value = params.data.datas
                var text = `{fline|${value}}{tline|个}`
                return text;
              },
              color: '#fff',
              rich: {
                fline: {
                  padding: [5, 0, 0, 20],
                  color: '#fff',
                  fontSize: 16,
                  fontWeight: 600
                },
                tline: {
                  padding: [5, 0, 0, 0],
                  color: '#fff',
                  fontSize: 12,
                  fontWeight: 300
                },
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              color: '#00FFF6',
            },
            symbol: "image://static/map-tip.png",
            symbolSize: [150, 75],
            symbolOffset: ['20%', '50%'],

            zlevel: 999,
            data: this.mapData,
          }
        ]
      };

      //echarts 设置地图外边框以及多个geo实现缩放拖曳同步
      chart.on('georoam', function (params) {
        var option = chart.getOption(); //获得option对象
        if (params.zoom != null && params.zoom != undefined) { //捕捉到缩放时
          option.geo[0].zoom = option.series[0].zoom; //下层geo的缩放等级跟着上层的geo一起改变
          option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
        } else { //捕捉到拖曳时
          option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
        }
        chart.setOption(option); //设置option
      });

      var _this = this;
      chart.on("click", function (params) { //点击事件
        console.log('我被点击了', params)
        if (params && params.data.datas > 0) {
          //_this.areaName = params.name;
          let center = params.data.center ? params.data.center : params.data.value;
          _this.showMap(center)
        }
      });
      window.addEventListener("resize", function () {
        chart.resize();
      });
      chart.setOption(option);
    },
    updateChart () {
      var _this = this;
      let option = {
        series: [
          {
          },
          {
          },
          {
            label: {
              show: true,
              formatter: function (params) {
                var name = params.data.name
                var value = params.data.datas
                var text = `{tline|${name}}\n{fline|${value}}`
                return text;
              },
              color: '#fff',
              rich: {
                fline: {
                  padding: [0, 25],
                  color: '#fff',
                  fontSize: 14,
                  fontWeight: 600
                },
                tline: {
                  padding: [5, 27],
                  color: '#fff',
                  fontSize: 14,
                  fontWeight: 600
                },
              },
              emphasis: {
                show: true
              }
            },
            data: this.mapData,
          }
        ]
      };
      chart.setOption(option);
    },
    showMap (center) {
      // 创建组件实例
      const vm = new Vue({
        // h 是creatElement方法的别名，作用是返回vNode虚拟dom
        render: h => h(MapInner, { props:{center:center} })
        // 不能直接写$mount('body')
        // vue 规定不能直接挂在到body html的跟节点上去
      }).$mount()

      // vm.$el 可以获取虚拟dom实例化的真实dom节点
      document.body.appendChild(vm.$el);

      // 创建回收方法 
      // 1. 获取组件实例
      // 2. 将组件从body上移除 使用removeChild方法
      const vDom = vm.$children[0];
      vDom.remove = () => {
        document.body.removeChild(vm.$el);
        // 销毁实例
        vDom.$destory();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.map-container {
  width: 100%;
  height: 100%;

  .map {
    width: 100%;
    height: 100%;
  }
}
</style>